$(() => {
  // 0. 获取地址栏的id，并根据 id 查询到文章内容，显示到页面中
  // 1. 初始化日期选择框
  // 2. 初始化富文本编辑器
  // 3. 初始化页面上文章分类数据
  // 4. 发表文章
  // 5. 文章封面照片选择后回显

  // console.log(window.location.search);
  // 0.1 获取查询参数的id值
  const searchObj = new URLSearchParams(window.location.search)
  const id = searchObj.get('id')
  // console.log(id)
  // searchObj.forEach((value, key) => {
  //   console.log({ key, value })
  // })

  // 0.2.1 并根据 id 查询到文章内容
  function getArticle() {
    $.ajax({
      type: 'get',
      url: '/admin/article/search',
      data: { id },
      success: (res) => {
        console.log(res)
        // 解构赋值
        const { title, cover, categoryId, date, content } = res.data
        // console.log( { title, cover, categoryId, date, content })
        $('#inputTitle').val(title)
        // 🧨注意：这里是替换图片地址
        $('#article_cover').attr('src', cover)
        // 🧨 注意：用 val 设置下拉框的值
        $('#categoryId').val(categoryId)
        $('#layerDate').val(date)
        $('#content').val(content)
      },
    })
  }

  // 业务1. 初始化日期选择框
  layui.use('laydate', function () {
    var laydate = layui.laydate
    //执行一个laydate实例
    laydate.render({
      elem: '#layerDate', // 指定元素
    })
  })

  // 业务2. 初始化富文本编辑器
  tinymce.init({
    selector: '#content', // 匹配页面中的 textarea 选择器
    language: 'zh_CN', // 显示中文界面，注意大小写
  })

  // 业务3. 初始化页面上文章分类数据
  $.ajax({
    type: 'get',
    url: '/admin/category/list',
    success: (res) => {
      console.log(res)
      // 3.3 调用模板
      const htmlStr = template('cate_item', res)
      // console.log(htmlStr);
      // 3.4 模板渲染到页面
      $('.category').html(htmlStr)
      // 🧨0.2.2 注意：获取到类别后，才获取文章的详情
      getArticle()
    },
  })

  // 业务4. 编辑文章 - 易错点
  $('.btn-release, .btn-draft').on('click', function (e) {
    e.preventDefault()
    // console.log(111);
    // 根据表单DOM元素初始化FormData对象，自动获取带 name 的表单元素的值
    const fd = new FormData(document.querySelector('#form'))
    // console.log(fd);
    // 获取富文本框中的内容
    const content = tinyMCE.editors['content'].getContent()
    // console.log(2222, content)
    // 把获取到的文章内容添加到 FormData 对象中
    fd.append('content', content)

    // 🎃：追加文章 id 参数
    fd.append('id', id)

    // 判断用户点击的到底是发布按钮，还是草稿按钮
    const state = $(this).text().trim()
    // console.log(state);
    if (state === '修改') {
      fd.append('state', '已发布')
    } else {
      // 空表示：存为草稿
      fd.append('state', '')
    }

    // 添加后，打印检查获取的参数结构
    fd.forEach((value, name) => {
      console.log({ name, value })
    })

    // 发布文章的 ajax 请求
    $.ajax({
      type: 'post',
      url: '/admin/article/edit',
      data: fd,
      // FormData 提交需要添加 cp 配置
      contentType: false,
      processData: false,
      success: (res) => {
        console.log(res)
        // 统一都有提示
        layer.msg(res.msg)
        // 如果是新增成功，一段时候后自动跳转到列表页
        if (res.code === 200) {
          setTimeout(() => {
            window.location.href = './article_list.html'
          }, 1500)
        }
      },
    })
  })

  // 业务5. 文章封面照片选择后显示，change 文件改变时触发
  $('#inputCover').on('change', function () {
    // console.log('文件改变时触发');
    // console.dir(this);
    // 5.1 获取选择的文件对象
    const file = this.files[0]
    // console.log(file)
    // 5.2 根据文件对象创建URL路径
    const url = URL.createObjectURL(file)
    // console.log(url)
    // 5.3 把路径更新到 img 中实现预览
    $('.article_cover').attr('src', url)
  })
})
